import { Space, Spin } from 'antd';
import React from 'react';
import { useModel } from 'umi';
import styles from './index.less';

const GlobalHeader: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const loading = (
    <span className={styles.action}>
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    </span>
  );

  if (!initialState) {
    return loading;
  }

  const { currentUser } = initialState;

  if (!currentUser || !currentUser.name) {
    return loading;
  }

  if (!initialState || !initialState.settings) {
    return null;
  }

  return (
    <Space className={styles.left}>
      <span className={styles.action}>
        <span className={`${styles.name} anticon`}>
          欢迎您，超级管理员 <span style={{ color: '#7192FA' }}>{currentUser.name}</span>
        </span>
      </span>
    </Space>
  );
};
export default GlobalHeader;
